<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id=""></select>
    <select name="" id=""></select>
    <select name="" id=""></select>
    <select name="" id=""></select>
    <script src="./area.js"></script>
    <script>
        var seles = document.querySelectorAll("select");
        //一
        var sheng = "";
        for (var key in place) {
            sheng += `<option value = "${key}">${key}</option>`
        }
        seles[0].innerHTML = sheng;
        seles[0].onchange = function(){
            er()
        }

        //二
        var plaCity = place["河南省"][0];
        //   var shi = "";
        //   for(var key1 in plaCity){
        //       shi += `<option value = "${key1}">${key1}</option>`
        //   }
        // seles[1].innerHTML = shi;
        er()
        function er() {
             plaCity = place[seles[0].value][0];
            var shi = "";
            for (var key1 in plaCity) {
                shi += `<option value = "${key1}">${key1}</option>`
            }
            seles[1].innerHTML = shi;
            san();
        }
      
      seles[1].onchange = function(){
        san();
      }
        //三
        // var qu = "";
        // plaCity["郑州市"].forEach(function (item) {
        //     for (var key in item) {
        //         qu += `<option value = "${key}">${key}</option>`
        //     }
        // })
        // seles[2].innerHTML = qu;
        // san();
        function san() {
            var qu = "";
            plaCity[seles[1].value].forEach(function (item) {
                for (var key in item) {
                    qu += `<option value = "${key}">${key}</option>`
                }
            })
            seles[2].innerHTML = qu;
            si();
        }
        seles[2].onchange = function(){
            si();
        }
        //四 
        var jie = plaCity["郑州市"][0]["中原区"]
        //  console.log(jie);
        // jie = jie.split("、")
        // console.log(jie);
        // var jie1 = "";
        // jie.forEach(function (item) {
        //     jie1 += `<option value = "${item}">${item}</option>`
        // })
        // seles[3].innerHTML = jie1;
        // si()

        function si() {

            var i = seles[2].selectedIndex;
             jie = plaCity[seles[1].value][i][seles[2].value];
            //  console.log(jie);
            jie = jie.split("、")
            // console.log(jie);
            var jie1 = "";
            jie.forEach(function (item) {
                jie1 += `<option value = "${item}">${item}</option>`
            })
            seles[3].innerHTML = jie1;
        }
    </script>


</body>

</html>